<template>
  <div class="paper">
    <div class="row g-3">
      <div @click="to_details(paper._id!)" class="col-lg-6" v-for="paper in papers" role="button">
        <div class="card border-light text-center">
          <div class="card-body">
            <h5 class="card-title">{{ paper.titleName }}</h5>
            <p class="card-text">
              {{ paper.desc }}
            </p>
          </div>
          <div v-if="paper.createdTime" class="card-footer text-muted">
            {{ new Date(paper.createdTime).toLocaleString() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
const papers = ref<Paper[]>([])
const initPapers = async () => {
  const { data } = await useApi.papers.get()
  papers.value = data.value?.data.data!
}
initPapers()
const to_details = (id: string) => {
  const router = useRouter()
  router.push({ path: '/paper/details', query: { id } })
}
</script>

<style lang="scss" scoped> 
.card-text,
 .card-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
</style>